<template>
    <div>
        <div class="wrap questionaireDetail" id="detail_vue" v-cloak v-if="loadComplete">
            <navbar :title="questionnaireName" :backCallback="cancel">
                <template #right>
                    <button class="header-right" style="width:50px;height:100%"  v-debounce="sureSave">{{$t('button_submit')}}</button>
                </template>
            </navbar>
            <section class="content" style="background: #fff">
                <div style="" class="xyd-evaluate-list diaocha" v-if="moduleTypeShow1">
                    <div class="evaluate" v-for="(items,index) in quesList " :key="items.ilsId">
                        <div class="elaborate">
                            <p>
                                <span class="color999">{{$t('cos_class_lesson_2')}}：</span>
                                <span>{{items.ilsTitle}}</span>
                            </p>
                            <p>
                                <span class="color999" style="padding-left:14px">{{$t('lecturer')}}：</span>
                                <span>{{items.instructorName || '--'}}</span>
                            </p>
                        </div>
                        <ul class="diaocha-ul quesListUl" v-bind:index="index">
                            <li style="" v-for="(item,index) in items.evaluationSubjectInfoList" :key='item.id' v-bind:aeitemLessionName="items.ilsTitle"  class="quesSet">
                                <form onsubmit="" name="">
                                    <span class="xyd-survey-icon">{{index+1}}</span>
                                    <dl v-bind:value="item.type" v-if="item.type===1" v-bind:aeitemLessonId="items.ilsId">
                                        <dt class="subjectTitle" v-bind:value="item.id" v-bind:subjectTitle="item.title"><em class="color-F8BC3A">[{{$t('single')}}]</em><span v-html="item.title"></span>
                                        </dt>
                                        <dd>
                                            <label class="rd-box wj-rd" v-for="answer in item.answerInfoList" :key="answer.id">
                                                <input class="rd answerinput qRaido" type="radio" v-bind:name="getName(items.aeitemLessonId,items.instructorId,item.id)" v-bind:value="answer.id"  @click="selectRadio(answer.id)" v-model="item.answer">
                                                <!-- <i class="nord"></i> -->
                                                <span class="color-gray333">{{answer.title}}</span>
                                            </label>
                                        </dd>
                                    </dl>
                                    <dl v-bind:value="item.type" v-else-if="item.type===2"  v-bind:aeitemLessonId="items.aeitemLessonId">
                                        <dt style=";" class="subjectTitle" v-bind:value="item.id" v-bind:subjectTitle="item.title"><em class="color-F8BC3A">[{{$t('OR')}}]</em><span v-html="item.title"></span></dt>
                                        <dd>
                                            <label class="check-box wj-check" v-for="answer in item.answerInfoList" :key="answer.id">
                                                <input type="checkbox" class="ck answerinput qCheckbox" v-bind:value="answer.id" v-bind:name="getName(items.aeitemLessonId,items.instructorId,item.id)" @click="selectCheckBox()"  v-model="item.answer">
                                                <!-- <i class="nocheck "></i> -->
                                                <span class="color-gray333">{{answer.title}}</span>
                                            </label>
                                        </dd>
                                    </dl>
                                    <dl v-bind:value="item.type" v-else-if="item.type===3" v-bind:aeitemLessonId="items.aeitemLessonId">
                                        <dt style=";" class="subjectTitle" v-bind:value="item.id" v-bind:subjectTitle="item.title"><em class="color-F8BC3A">[{{$t('questions_and_answers')}}]</em><span v-html="item.title"></span></dt>
                                        <dd>
                                            <textarea class="proposal-box answerinput qText" v-model="item.answer" v-bind:name="getName(items.aeitemLessonId,items.instructorId,item.id)" ></textarea>
                                            <div class='mask_tip mask_title_len_tip showTip' v-show="getByteLen(item.answer) > 500">{{$t('lab_error_1')}}</div>
                                        </dd>
                                    </dl>
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="" class="xyd-evaluate-list diaocha" v-if="moduleTypeShow2">
                    <div class="evaluate" v-for="(item,index) in quesList " :key="item.id">
                        <ul class="diaocha-ul quesListUl"  v-bind:index="index">
                            <li style=""  class="quesSet">
                                <form onsubmit="" name="">
                                    <span class="xyd-survey-icon">{{index+1}}</span>
                                    <dl v-bind:value="item.type"  v-if="item.type===1">
                                        <dt style="height:auto;" class="subjectTitle" v-bind:value="item.id"  v-bind:subjectTitle="item.title"><em class="color-F8BC3A">[{{$t('single')}}]</em><span v-html="item.title"></span></dt>
                                        <dd>
                                            <label class="rd-box wj-rd"  v-for="answer in item.answerInfoList" :key="answer.id">
                                                <input class="rd answerinput qRaido" type="radio" v-bind:name="item.id" v-bind:value="answer.id"   @click="selectRadio(index, answer.id)" v-model="item.answer">
                                                <!-- <i class="nord" :class="{'fa-rd': item.answer === answer.id}"></i> -->
                                                <span class="color-gray333">{{answer.title}}</span>
                                            </label>
                                        </dd>
                                    </dl>
                                    <dl  v-bind:value="item.type" v-else-if="item.type===2">
                                        <dt style=";" class="subjectTitle" v-bind:value="item.id" v-bind:subjectTitle="item.title"><em class="color-F8BC3A">[{{$t('OR')}}]</em><span v-html="item.title"></span></dt>
                                        <dd>
                                            <label class="check-box wj-check" v-for="answer in item.answerInfoList" :key="answer.id">
                                                <input v-model="item.answer" type="checkbox" class="ck answerinput qCheckbox"  v-bind:name="item.id" v-bind:value="answer.id" @nclick="selectCheckBox(index, answer.id)">
                                                <!-- <i class="nocheck"></i> -->
                                                <span class="color-gray333">{{answer.title}}</span>
                                                </label>
                                            </dd>
                                        </dl>
                                        <dl v-bind:value="item.type" v-else-if="item.type===3">
                                            <dt style=";" class="subjectTitle" v-bind:value="item.id" v-bind:subjectTitle="item.title"><em class="color-F8BC3A">[{{$t('questions_and_answers')}}]</em><span v-html="item.title"></span></dt>
                                            <dd>
                                                <textarea v-model="item.answer" class="proposal-box answerinput qText" v-bind:name="item.id"></textarea>
                                                <div class='mask_tip mask_title_len_tip showTip' v-show="getByteLen(item.answer) > 500">{{$t('lab_error_1')}}</div>
                                            </dd>
                                        </dl>
                                    </form>
                                </li>
                            </ul>
                        </div>

                    </div>
                </section>
            </div>
            <van-dialog
            v-model="suerTip"
            show-cancel-button
            :title="$t('is_sure_1')"
            :confirmButtonText="$t('sure')"
            :cancelButtonText="$t('cancel')"
            @confirm="takeAnswerList()"
            >
            </van-dialog>
            <van-dialog
            v-model="radioTip"
            :title="$t('lab_error_2')"
            :confirmButtonText="$t('sure')"
            >
            </van-dialog>
            <van-dialog
            v-model="contentTip"
            :title="$t('lab_error_3')"
            :confirmButtonText="$t('sure')"
            >
            </van-dialog>
            <van-dialog
            v-model="submitTip"
            :title="submitDesc"
            :confirmButtonText="$t('sure')"
            @confirm="afterSubmit()"
            >
            </van-dialog>
            <van-dialog
            v-model="isCancel"
            show-cancel-button
            :title="$t('lab_error_4')"
            :confirmButtonText="$t('sure')"
            :cancelButtonText="$t('cancel')"
            @confirm="cancel(true)"
            >
            </van-dialog>
            <!-- 未回答完提示 -->
            <van-dialog
            v-model="answerTip"
            :title="$t('lab_error_5')"
            :confirmButtonText="$t('sure')"
            >
            </van-dialog>
            <van-dialog
            v-model="tstErrorTips"
            :title="tipsType"
            :confirmButtonText="$t('sure')"
            @confirm="cancel(true)"
            style="max-height:500px;overflow:scroll"
            >
            </van-dialog>
    </div>
</template>

<script>
export default {
    name: 'aceDetail',
    data() {
        return {
            tstErrorTips: false,
            tipsType: '',
            lessonStr: '',
            moduleId: '',
            itmId: '',
            encItmId: null,
            moduleType: 2,
            moduleTypeShow1: false,
            moduleTypeShow2: false,
            quesList: [{
                subjects: []
            }],
            loadComplete: false,
            btnShow: true,
            questionnaireName: '',
            shareLink: 0,
            answerList: {
                startTime: '',
                subjectInfoList: [{
                    subjectId: '',
                    subjectTitle: '',
                    moduleId: '',
                    lessonId: '',
                    subjectType: '',
                    answerIdList: [],
                    content: ''
                }],
                lessonIdList: [],
                itmId: ''
            },
            suerTip: false,
            radioTip: false,
            checkTip: false,
            contentTip: false,
            submitTip: false,
            submitDesc: '',
            isCancel: false,
            answerTip: false,
            ilsId: ''
        };
    },
    methods: {
        onlineCalculation(type) {
            this.$axios({
                method: 'GET',
                url: `/app/api/data/kanban/online/${type}/calculate`
            }).then(res => {
                console.log(res);
            });
        },
        init: function() {
            //判断初始化方式
            var itmId = this.$route.query.itmId;
            var encItmId = this.$route.query.encItmId;
            var lessonStr = this.$route.query.lessonStr;
            var moduleId = this.$route.query.modId;
            var operation = this.$route.query.operation;
            var courseId = this.$route.query.courseId;
            var resPreviewInd = this.$route.query.resPreviewInd;
            var shareLink = this.$route.query.shareLink;
            if (shareLink != null) {
                if (shareLink === '1') {
                    this.shareLink = 1;
                } else {
                    this.shareLink = 0;
                }
            } else {
                this.shareLink = 0;
            }
            var date = new Date();
            date = date.getTime();
            this.answerList.startTime = date;
            this.lessonStr = lessonStr;
            this.moduleId = moduleId;
            this.itmId = itmId;
            this.encItmId = encItmId;
            this.answerList.itmId = itmId;
            this.courseId = courseId;
            this.resPreviewInd = resPreviewInd;
            if (lessonStr != null) {
                this.answerList.lessonIdList = lessonStr.split(',');
            }
            if (resPreviewInd != null && resPreviewInd === '1') {
                this.btnShow = false;
            }
            if (operation === 1) {
                this.moduleType = 1;
                this.moduleTypeShow1 = true;
                this.moduleTypeShow2 = false;
            } else {
                this.moduleType = 2;
                this.moduleTypeShow2 = true;
                this.moduleTypeShow1 = false;
            }
            this.quesDetail(this);
        },
        quesDetail: function() {
            // 获取问卷信息
            let url = '';
            let data = {};
            if (this.lessonStr) {
                this.moduleType = 1;
                this.moduleTypeShow1 = true;
                this.moduleTypeShow2 = false;
            } else {
                this.moduleType = 2;
                this.moduleTypeShow2 = true;
                this.moduleTypeShow1 = false;
            }
            if (this.moduleType === 1) {
                url = `/app/api/trainee/course/lesson/record/list`;
                var itmId = this.itmId;
                var lessonStr = this.lessonStr.split(',');
                data = {
                    'itmId': itmId,
                    'ilsIdArr': lessonStr,
                    modId: this.moduleId
                };
            } else {
                data = {
                    itmId: this.itmId,
                    modId: this.moduleId
                };
                url = `/app/api/trainee/course/lesson/record/list`;
            }
            this.$axios({
                url: url,
                method: 'POST',
                data: data
            }).then(res => {
                if (res.status === 200) {
                    if (!res.data) {
                        alert(res.data.errMsg);
                        this.quesList = [];
                    } else {
                        if (this.moduleType === 1) {
                            this.quesList = res.data;
                        } else {
                            this.quesList = res.data[0].evaluationSubjectInfoList;
                            this.ilsId = res.data[0].ilsId;
                        }
                        this.questionnaireName = res.data[0].questionnaireName;
                        this.quesList.forEach(item => {
                            if (this.moduleType === 1) {
                                item.evaluationSubjectInfoList.forEach(sub => {
                                    sub.lessonId = item.ilsId;
                                    if (sub.type === 1) {
                                        sub.answer = '';
                                    } else if (sub.type === 2) {
                                        sub.answer = [];
                                    } else if (sub.type === 3) {
                                        sub.answer = '';
                                    }
                                });
                            } else {
                                if (item.type === 1) {
                                    item.answer = '';
                                } else if (item.type === 2) {
                                    item.answer = [];
                                } else if (item.type === 3) {
                                    item.answer = '';
                                }
                            }
                        });
                        this.loadComplete = true;
                    }
                }
            }).catch(error => {
                console.log(error);
                this.tstErrorTips = true;
                this.tipsType = error.response.data.errMsg;
            });
        },
        getName: function(aeitemLessonId, instructorId, id) {
            return aeitemLessonId + '-' + instructorId + '-' + id;
        },
        SubmissionQues: function(answerList) {
            // var data = JSON.stringify(answerList);
            this.$axios({
                url: `/app/api/trainee/course/lesson/answer/submit`,
                method: 'POST',
                data: answerList
            }).then(res => {
                if (res.status === 200) {
                    this.submitDesc = this.$t('successfully_submitted');
                    this.submitTip = true;
                }
            }).catch(error => {
                this.tstErrorTips = true;
                this.tipsType = error.response.data.errMsg;
            });
        },
        afterSubmit: function() {
            if (this.shareLink === 1) {
                this.$router.replace({path: `/home`});
            } else {
                // this.$router.replace({path: `/course/${this.itmId}/0`});
                this.$router.go(-1);
            }
        },
        quesLength: function() {
            if (this.quesList.length !== 0) {
                if (this.moduleType === 1) {
                    return this.quesList[0].subjects.length;
                } else {
                    return this.quesList.length;
                }
            } else {
                return '0';
            }
        },
        cancel: function(is) {
            if (is) {
                this.$router.go(-1);
            } else {
                this.isCancel = true;
            }
        },
        clickSave: function() {
            this.suerTip = true;
        },
        sureSave: function() {
            var status = true;
            // 判断是否已回答完
            if (this.moduleType === 1) {} else {
                status = this.quesList.every(item => {
                    if (item.type === 2) {
                        return item.answer.length > 0;
                    } else {

                    }
                    return item.answer !== '';
                });
                if (!status) {
                    this.answerTip = true;
                    return false;
                }
            }
            this.quesList.forEach(item => {
                if (this.moduleType === 1) {
                    let list = item.evaluationSubjectInfoList;
                    list.forEach(subject => {
                        if (subject.type === 1) {
                            if (subject.answer === '') {
                                this.radioTip = true;
                                status = false;
                                return false;
                            }
                        } else if (subject.type === 2) {
                        } else if (subject.type === 3) {
                            var _val = subject.answer;
                            var _cur = this.getByteLen(_val);
                            if (_cur > 500) {
                                this.contentTip = true;
                                status = false;
                                return false;
                            }
                        }
                    });
                } else {
                    if (item.type === 1) {
                        if (item.answer === '') {
                            this.radioTip = true;
                            status = false;
                            return false;
                        }
                    } else if (item.type === 2) {
                    } else if (item.type === 3) {
                        var _val = item.answer;
                        var _cur = this.getByteLen(_val);
                        if (_cur > 500) {
                            this.contentTip = true;
                            status = false;
                            return false;
                        }
                    }
                }
            });
            if (status === true) {
                this.clickSave();
            }
        },
        back() {
            this.$router.go(-1);
        },
        selectRadio(index, id) {
            // console.log(this.quesList[index]);
        },
        selectCheckBox(index, id) {
            // console.log(this.quesList[index]);
            // var rdBox = obj.parentNode.getElementsByClassName('nocheck');
            // if (obj.checked) {
            //     $(rdBox).addClass('fa-check');
            // } else {
            //     $(rdBox).removeClass('fa-check');
            // }
        },
        getByteLen(val) {
            var len = 0;
            for (var i = 0; i < val.length; i++) {
                // eslint-disable-next-line no-control-regex
                if (val[i].match(/[^\x00-\xff]/ig) != null) {
                    len += 2;
                } else {
                    len += 1;
                }
            }
            return len;
        },
        takeAnswerList() {
            // 组成问卷答案数据
            let newList = [];
            let newSubject = [];
            let newArr = {};
            this.quesList.forEach(item => {
                var answerList = {};
                answerList['startTime'] = this.answerList.startTime;
                if (this.answerList.lessonIdList) {
                    answerList['lessonIdList'] = [item.ilsId];
                } else {
                    answerList['lessonIdList'] = [];
                }
                answerList['itmId'] = this.answerList.itmId;
                var subjectInfoList = [];
                if (this.moduleType === 1) {
                    let list = item.evaluationSubjectInfoList;
                    newSubject = list.map(subject => {
                        const obj = { subjectId: String(subject.id), subjectTitle: subject.title, moduleId: String(this.moduleId), subjectType: String(subject.type) };
                        if (subject.lessonId) {
                            obj.lessonId = subject.lessonId;
                        }
                        if (subject.type === 1) {
                            obj.answerIdList = [];
                            obj.answerIdList.push(subject.answer);
                        } else if (subject.type === 2) {
                            obj.answerIdList = subject.answer;
                        } else if (subject.type === 3) {
                            obj.content = subject.answer;
                        }
                        return obj;
                    });
                    subjectInfoList = newSubject;
                    answerList['subjectInfoList'] = subjectInfoList;
                    newList.push(answerList);
                } else {
                    var arr = {};
                    arr.subjectId = item.id;
                    arr.subjectType = item.type;
                    arr.subjectTitle = item.title;
                    // arr.lecturerId = item.instructorId;
                    // arr.lecturerName = item.instructorName;
                    arr.moduleId = this.moduleId;
                    arr.lessonId = item.aeitemLessonId;
                    if (item.type === 1) {
                        arr.answerIdList = [];
                        arr.answerIdList.push(item.answer);
                    } else if (item.type === 2) {
                        arr.answerIdList = item.answer;
                    } else if (item.type === 3) {
                        arr.content = item.answer;
                    }
                    newSubject.push(arr);
                }
            });
            if (this.moduleType !== 1) {
                newArr['startTime'] = this.answerList.startTime;
                newArr['answerList'] = [];
                if (this.ilsId !== '') {
                    newArr['lessonIdList'] = [this.ilsId];
                } else {
                    newArr['lessonIdList'] = [];
                }
                newArr.itmId = this.itmId;
                newArr['subjectInfoList'] = newSubject;
                newList[0] = newArr;
            }
            this.SubmissionQues(newList);
        }

    },
    destroyed() {
        this.onlineCalculation('ONLINE_LEARN_DEC');
    },
    mounted: function() {
        this.init();
        this.onlineCalculation('ONLINE_LEARN_INC');
    },
    computed: {
    }
};
</script>

<style scoped lang="less">
@import "./courseLess.less";
@import "./aceDetail.less";
/deep/ .weui-dialog.weui-skin_android .weui-dialog__bd:first-child{
    max-height: 500px;
    overflow: scroll;
}
.elaborate {
    background: #f5f5f5;
    padding: 15px;
    margin-bottom: 10px;
    .color999 {
        color:#999;
    }
}
</style>
